<template>
    <div class="business" ref="bussiness">
      <div class="bussiness-wrapper">
        <div class="overview">
          <h1 class="title">{{seller.name}}</h1>
          <div class="star-wrapper">
            <v-star :size="36" :score="seller.score"></v-star>
            <span class="number">({{seller.ratingCount}})</span>
            <span class="sell-count">月售{{ seller.sellCount }}单</span>
          </div>
          <div class="favorite" @click="showFavortie">
            <i class="icon-favorite" :class="{'active' : favoriteFlag}"></i>
            <div class="text" v-show="!favoriteFlag">收藏</div>
            <div class="text" v-show="favoriteFlag">已收藏</div>
          </div>
        </div>
        <ul class="remake">
          <li class="cell">
            <div class="name">起送价</div>
            <div class="number">{{seller.minPrice}}<span class="unit">元</span></div>
          </li>
          <li class="cell">
            <div class="name">商家配送</div>
            <div class="number">{{seller.deliveryPrice}}<span class="unit">元</span></div>
          </li>
          <li class="cell">
            <div class="name">平均配送时间</div>
            <div class="number">{{seller.deliveryTime}}<span class="unit">分钟</span></div>
          </li>
        </ul>
        <v-split></v-split>
        <div class="bulletin">
          <div class="title">公告与活动</div>
          <div class="bull-text">{{seller.bulletin}}</div>
          <div class="supports_list">
            <div v-for="item in seller.supports" class="supports">
              <span class="icon" :class="classMap[item.type]"></span>
              <span class="text">{{ item.description}}</span>
            </div>
          </div>
        </div>
        <v-split></v-split>
        <div class="pics">
          <div class="title">商家实景</div>
          <div class="pics-wrapper" ref="pics">
          <ul class="pics-box" ref="picList">
            <li class="pic-cell" v-for="item in seller.pics"><img :src="item" height="100%" width="100%" alt=""></li>
          </ul>
          </div>
        </div>
        <v-split></v-split>
        <div class="info">
          <div class="title">商家信息</div>
          <div class="cell" v-for="item in seller.infos">{{item}}</div>
        </div>
      </div>
    </div>
</template>

<script>
  import Star from '../start/start'
  import Split from '../split/Split'
  import BScroll from 'better-scroll'
    export default {
        name: "Business",
        components:{
          'v-star': Star,
          'v-split': Split
        },
      props:{
          seller:{
            type: Object
          }
      },
      created(){
        this.classMap = ['decrease','discount','special','invoice','guarantee']
      },
      data(){
          return {
            favoriteFlag: false
          }
      },
      watch:{
        seller(){
          this._initScroll()
          this._initPicScroll()
        }
      },
      mounted(){
        //重新加载页面 由于第二次进入页面数据不会变 scroll就不能滚动的bug 会再次重走生命周期
        if(this.seller.pics){
          this._initScroll()
          this._initPicScroll()
        }

      },
      methods:{
        showFavortie(){
          this.favoriteFlag = !this.favoriteFlag;
        },
        _initScroll(){
          if(!this.scroll){
            this.$nextTick( ()=>{
              this.scroll = new BScroll(this.$refs.bussiness,{
                scrollY: true,
                click: true
              })
            })
          }else{
            this.$nextTick( ()=>{
              this.scroll.refresh();
            })
          }
        },
        _initPicScroll(){
          let picWidth = 120;
          let margin = 6;
          let width = (picWidth + margin) * this.seller.pics.length - margin;
          this.$refs.picList.style.width = width+'px';
          if(!this.picScroll){
            this.$nextTick( ()=>{
              this.picScroll = new BScroll(this.$refs.pics,{
                scrollX: true,
                eventPassthrough: 'vertical'
              })
            })
          }else{
            this.$nextTick( ()=>{
              this.picScroll.refresh();
            })
          }

        }
      }
    }
</script>

<style lang="scss" scoped>
  .business{
    position: absolute;
    overflow: hidden;
    width: 100%;
    top: 174px;
    bottom: 0;
    left: 0;
    .bussiness-wrapper{
      width: 100%;
      display: block;
      .overview{
        margin: 0 18px;
        padding: 18px 0;
        display: flex;
        flex-direction: column;
        @include border-1px($boder-color);
        .title{
          font-size: 14px;
          color: $text-body-color;
          line-height: 14px;
          font-weight: normal;
          margin-bottom: 8px;
        }
        .star-wrapper{
          font-size: 0;
          .number{
            vertical-align: top;
            margin-left: 8px;
            margin-right: 12px;
            font-size: 10px;
            color: rgb(77,85,93);
          }
          .sell-count{
            vertical-align: top;
            font-size: 10px;
            color: rgb(77,85,93);
          }
        }
      }
      .favorite{
        position: absolute;
        top: 18px;
        right: 0px;
        width: 50px;
        text-align: center;
        .icon-favorite{
          font-size: 24px;
          color: rgba(7,17,27,.3);
          line-height: 24px;
          &.active{
            color: $text-red-color;
          }
        }
        .text{
          font-size: 10px;
          line-height: 10px;
          color: rgb(77,85,93);
          margin-top: 4px;
        }
      }
      .remake{
        display: flex;

        margin: 18px 0;
        .cell{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          border-right: 1px solid $boder-color;
          &:last-child{
            border-right: 0;
          }
          .name{
            font-size: 10px;
            line-height: 10px;
            color:$text-desc-color;
            margin-bottom: 4px;
          }
          .number{
            font-size: 24px;
            font-weight: 200;
            color: $text-body-color;
            line-height: 24px;
            .unit{
              font-size: 10px;
            }
          }
        }
      }
      .bulletin{
        margin: 18px 18px 0 18px;
        .title{
          font-size: 14px;
          color: $text-body-color;
          line-height: 14px;
        }
        .bull-text{
          font-size: 12px;
          line-height: 24px;
          font-weight: 200;
          padding: 8px 12px 16px;
          color: $text-red-color;
          @include border-1px($boder-color);
        }
        .supports_list{
          .supports{
            margin-top: 16px;
            padding:0 12px 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid $boder-color;
            &:last-child{
              border-bottom: 0;
            }
            .icon{
              height: 16px;
              width: 16px;
              background-repeat: no-repeat;
              background-size: 16px 16px;
            }
            .text{
              font-size: 12px;
              color: $text-body-color;
              line-height: 200;
              line-height: 16px;
              margin-left: 6px;
            }
          }
        }
      }
      .pics{
          padding: 18px;
          .title{
            font-size: 14px;
            color: $text-body-color;
            line-height: 14px;
            margin-bottom: 12px;
          }
          .pics-wrapper{
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
          .pics-box{
            font-size: 0;
            .pic-cell{
              display: inline-block;
              height: 90px;
              width: 120px;
              margin-right: 6px;
              &:last-child{
                margin-right: 0;
              }
            }
          }
        }
      }
      .info{
        padding: 18px;
        .title{
          font-size: 14px;
          color: $text-body-color;
          line-height: 14px;
          margin-bottom: 12px;
        }
        .cell{
          font-size: 12px;
          font-weight: 200;
          line-height: 16px;
          padding: 16px 12px;
          border-top: 1px solid $boder-color;
        }
      }
    }
  }
  .icon {
    &.decrease {
      @include bg-image("decrease_3");
    }
    &.discount {
      @include bg-image("discount_3");
    }
    &.guarantee {
      @include bg-image("guarantee_3");
    }
    &.invoice {
      @include bg-image("invoice_3")
    }
    &.special {
      @include bg-image("special_3");
    }
  }
</style>
